<template>
  <div class="layui-container fly-marginTop">
    <!-- <alert
      msg="这是一个弹窗"
      :isShow="true"
    ></alert> -->
    <div
      class="fly-panel fly-panel-user"
      pad20
    >
      <div
        class="layui-tab layui-tab-brief"
        lay-filter="user"
      >
        <ul class="layui-tab-title">
          <li class="layui-this">登入</li>
          <li>
            <router-link :to="{name: 'reg'}">注册</router-link>
          </li>
        </ul>
        <div
          class="layui-form layui-tab-content"
          id="LAY_ucm"
          style="padding: 20px 0;"
        >
          <div class="layui-tab-item layui-show">
            <div class="layui-form layui-form-pane">
              <validation-observer
                v-slot="{ validate }"
                ref="observer"
              >
                <form method="post">
                  <div class="layui-form-item">
                    <label
                      for="L_email"
                      class="layui-form-label"
                    >用户名</label>
                    <validation-provider
                      rules="required|email"
                      v-slot="{ errors }"
                    >
                      <div class="layui-input-inline">
                        <input
                          v-model="username"
                          type="text"
                          name="email1111"
                          placeholder="请输入用户名"
                          lay-verify="required"
                          autocomplete="off"
                          class="layui-input"
                        >
                      </div>
                      <div class="layui-form-mid">
                        <span style="color: #c00;">{{ errors[0] }}</span>
                      </div>
                    </validation-provider>
                  </div>
                  <div class="layui-form-item">
                    <label
                      for="L_pass"
                      class="layui-form-label"
                    >密码</label>
                    <validation-provider
                      rules="required|min:6"
                      v-slot="{ errors }"
                    >
                      <div class="layui-input-inline">
                        <input
                          v-model="password"
                          type="password"
                          name="password"
                          placeholder="请输入密码"
                          lay-verify="required"
                          autocomplete="off"
                          class="layui-input"
                        >
                      </div>
                      <div class="layui-form-mid">
                        <span style="color: #c00;">{{ errors[0] }}</span>
                      </div>
                    </validation-provider>
                  </div>
                  <div class="layui-form-item">
                    <label
                      for="L_vercode"
                      class="layui-form-label"
                    >验证码</label>

                    <validation-provider
                      rules="required|length:4"
                      v-slot="{ errors }"
                      ref="codefield"
                    >
                      <div class="layui-input-inline">
                        <input
                          v-model="code"
                          type="text"
                          name="vercode"
                          required
                          lay-verify="required"
                          placeholder="请输入验证码"
                          autocomplete="off"
                          class="layui-input"
                        >
                      </div>
                      <div class="layui-form-mid">
                        <span style="color: #c00;">{{ errors[0] }}</span>
                      </div>
                      <div
                        class="captcha"
                        v-html="captcha"
                        @click="getCaptcha"
                      ></div>
                    </validation-provider>
                  </div>
                  <div class="layui-form-item">
                    <button
                      class="layui-btn"
                      type="button"
                      lay-filter="*"
                      lay-submit
                      @click="validate().then(submit)"
                    >立即登录</button>
                    <span style="padding-left:20px;">
                      <router-link :to="{name: 'forget'}">忘记密码？</router-link>
                    </span>
                  </div>
                  <div class="layui-form-item fly-form-app">
                    <span>或者使用社交账号登入</span>
                    <a
                      href=""
                      onclick="layer.msg('正在通过QQ登入', {icon:16, shade: 0.1, time:0})"
                      class="iconfont icon-qq"
                      title="QQ登入"
                    ></a>
                    <a
                      href=""
                      onclick="layer.msg('正在通过微博登入', {icon:16, shade: 0.1, time:0})"
                      class="iconfont icon-weibo"
                      title="微博登入"
                    ></a>
                  </div>
                </form>
              </validation-observer>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ValidationProvider, ValidationObserver } from "vee-validate";
import { getCode, login } from "@/api/login";
import { v4 as uuidv4 } from "uuid";
// import Alert from "@/components/modules/alert/Alert";

export default {
  name: "login",
  components: {
    ValidationProvider,
    ValidationObserver,
    // Alert,
  },
  data() {
    return {
      captcha: "",
      username: "",
      password: "",
      code: "",
    };
  },
  methods: {
    getCaptcha() {
      let sid = this.$store.state.sid;
      getCode(sid).then((res) => {
        this.captcha = res.data;
      });
    },

    async submit() {
      const isValid = await this.$refs.observer.validate();
      if (isValid) {
      } else {
        return;
      }
      console.log("submit event");
      login({
        username: this.username,
        password: this.password,
        code: this.code,
        sid: this.$store.state.sid,
      })
        .then((res) => {
          if (res.code === 200) {
            console.log(res);
            this.username = "";
            this.password = "";
            this.code = "";
            requestAnimationFrame(() => {
              this.$refs.observer.reset();
            });
          } else if (res.code === 401) {
            this.$refs.codefield.setErrors([res.msg]);
          }
        })
        .catch((err) => {
          // 查看错误信息
          console.log(err.response);
          const data = err.response.data;
          if (data.code === 500) {
            this.$alert("用户名或密码错误");
          }
        });
    },
  },
  mounted() {
    console.log(this.$refs);
    window.vue = this;

    let sid = "";
    if (localStorage.getItem("sid")) {
      sid = localStorage.getItem("sid");
    } else {
      sid = uuidv4();
      localStorage.setItem("sid", sid);
    }
    this.$store.commit("setSid", sid);
    this.getCaptcha();
  },
};
</script>

<style lang="scss" scoped>
.captcha {
  // position: relative;
  // top: -10px;
}
</style>